<template>
<div>
  <div style="background: #ededed; padding-bottom: 30px">
    <!-- 内容区域 -->
    <div class="content" style="padding-top: 30px">
      <div
        :key="index"
        v-for="(item, index) in tabList"
        style="margin-bottom: 20px"
      >
        <div
          class="info divInnerBox"
          :class="['info' + inner.id]"
          :key="index1"
          v-for="(inner, index1) in item.list"
        >
          <div class="titles">
            <div>
              {{ inner.name }}
              <span v-if="[0, 2, 3].includes(inner.id)">
                <!-- {{ `edit${inner.id}` }} -->
                <i
                  v-if="inner.id == 0 && edit0"
                  @click="Fnedit(inner.id)"
                  class="el-icon-edit-outline"
                >
                </i>
                <i
                  v-if="inner.id == 2 && edit2"
                  @click="Fnedit(inner.id)"
                  class="el-icon-edit-outline"
                >
                </i>
                <i
                  v-if="inner.id == 3 && edit3"
                  @click="Fnedit(inner.id)"
                  class="el-icon-edit-outline"
                >
                </i>
              </span>
            </div>

            <el-button
              @click="addqaStatus = true"
              style="margin-left: 100px"
              size="small"
              v-if="inner.id == 5"
              type="primary"
              >继续提问</el-button
            >
          </div>

          <!-- edit0:true,
      edit1:true,
      edit2:true,
      edit3:true, -->
          <!-- 基本信息 -->
          <div v-if="inner.id == 0" class="baseInfo">
            <baseInfo
              :edit="edit0"
              :infBox="infBox"
              @FnbaseInofo="FnbaseInofo"
            />
          </div>

          <!-- 修改密码 -->
          <div v-else-if="inner.id == 1" class="baseInfo">
            <changePsw />
          </div>
          <!-- 收货地址 -->
          <div v-else-if="inner.id == 2" class="baseInfo">
            <changeAddr
              :edit="edit2"
              :infBox="infBox"
              @FnchangeAddr="FnchangeAddr"
            />
          </div>
          <!-- 开票设置 -->
          <div v-if="inner.id == 3" class="baseInfo">
            <getticked
              :edit="edit3"
              :infBox="infBox"
              @Fngetticked="Fngetticked"
            />
          </div>

          <!-- 我的订单 -->
          <div v-if="inner.id == 4" class="baseInfo">
            <orders @repay="repay" />

           

          </div>
          <!-- 问题反馈 -->
          <div v-if="inner.id == 5" class="baseInfo" style="padding: 20px 0">
            <el-tabs
              type="border-card"
              v-model="activeName"
              @tab-click="handleClick"
            >
              <el-tab-pane
                :key="item.id"
                v-for="item in list"
                :label="item.name"
                :name="item.id"
              ></el-tab-pane>

   

              <lookQA
                v-if="answerList && answerList.issueVoListMe && answerList.issueVoListMe.length"
                :list="answerList.issueVoListMe"
              />

              <el-empty v-else description="暂无提问"></el-empty>
            </el-tabs>

            <!-- <el-empty description="暂无数据"></el-empty> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 导航区域 -->

    <ul class="navs">
      <li :key="index" v-for="(item, index) in tabList">
        <div class="first">
          {{ item.name }}
        </div>
        <!--  -->
        <div
          :class="{ active: active == inner.id }"
          class="sec"
          :key="index1"
          v-for="(inner, index1) in item.list"
          @click="scrollTo(inner.id)"
        >
          {{ inner.name }}
        </div>
      </li>
    </ul>

    <!-- 增加提问 -->
    <addQA :curCate="curCate" v-if="addqaStatus" @fnaddqa="fnaddqa" />
 
  
 </div>

 <div >
              <div v-html="htmlCode"></div>
            </div>
</div>
</template>
  
  <script>
import lookQA from "../components/lookQA.vue";
import addQA from "../components/addQA.vue";
import baseInfo from "../components/user/baseInfo.vue";
import changePsw from "../components/user/changePsw.vue";
import changeAddr from "../components/user/changeAddr.vue";
import getticked from "../components/user/getticked.vue";
import orders from "../components/user/order.vue";
import { getuserinfo, getissuelist, getnavigationList ,continuepay} from "../apis/index";
export default {
  props: {},
  components: {
    addQA,
    lookQA,
    baseInfo,
    changePsw,
    changeAddr,
    getticked,
    orders,
  },
  data() {
    return {
      htmlCode:null,
      list: [],
      curCate: "",
      edit0: true,
      edit1: true,
      edit2: true,
      edit3: true,
      infBox: null,
      addqaStatus: false,
      activeName: "0",
      tabList: [
        {
          name: "账号信息",
          id: "1",
          list: [
            {
              name: "基本信息",
              id: 0,
            },
            {
              name: "修改密码",
              id: 1,
            },
            {
              name: "收货地址",
              id: 2,
            },
          ],
        },

        {
          name: "发票管理",
          id: "3",
          list: [
            {
              name: "开票设置",
              id: 3,
            },
          ],
        },
        {
          name: "订单中心",
          id: "2",
          list: [
            {
              name: "我的订单",
              id: 4,
            },
          ],
        },
        {
          name: "消息中心",
          id: "4",
          list: [
            {
              name: "问题反馈",
              id: 5,
            },
          ],
        },
      ],
      active: 0, // 当前激活的导航索引
      answerList: [],
    };
  },
  mounted() {
    // 监听滚动事件
    window.addEventListener("scroll", this.onScroll, false);
    this.getDate();
    this.getCateList();
    // this.getissuelist()
  },
  destroy() {
    // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
    window.removeEventListener("scroll", this.onScroll);
  },
  methods: {
    repay(id){
      console.log(id,444444);

      continuepay(id)
        .then((res) => {

          console.log(res,555);
        
          if (res.data.code == 200) {
          
            this.htmlCode = res.data.data.body;
            this.$nextTick(() => {
              document.getElementById('bestPayForm').submit(); //渲染支付宝支付页面
            });
          } else if (res.data.code == 99) {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });

            setTimeout(() => {
              this.$router.push({
                path: "/user",
              });
            }, 500);
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
        })
        .catch(() => {});

    },
    // 分了列表
    getCateList() {
      getnavigationList()
        .then((res) => {
          this.list = res.data.data?.map((r, index) => {
            return {
              name: r.nameType,
              id: index + "",
            };
          });
          this.curCate = this.list[0]?.name;
          this.getissuelist();
        })
        .catch(() => {});
    },

    getissuelist() {
      getissuelist({
        nameType: this.curCate,
        isSearchMe: 1,
      })
        .then((res) => {
          this.answerList = res.data.data;
        })
        .catch(() => {});
    },
    FnbaseInofo(val) {
      this.edit0 = true;
      val ? this.getDate() : "";
    },
    FnchangeAddr(val) {
      this.edit2 = true;
      val ? this.getDate() : "";
    },
    Fngetticked() {
      this.edit3 = true;
      val ? this.getDate() : "";
    },
    Fnedit(id) {
      this["edit" + id] = false;

      console.log("edit" + id, 33333);
    },
    getDate() {
      getuserinfo()
        .then((res) => {
          this.infBox = res.data.data;
          console.log(this.infBox, 333);
        })
        .catch(() => {});
    },
    fnaddqa() {
      this.addqaStatus = false;
      this.getissuelist()
    },

    vadioPlay() {
      this.dialogVisible = true;
      // console.log(this.$refs.videoPlayer)
    },

    onPlayerPlay(player, index) {
      // 解决视频可以多个并行播放的问题，实现唯一视频播放，使用中间变量存放当前播放视频，播放其他视频时，暂停当前视频即可
      // if (this.currentPlayer) {
      //   this.currentPlayer.pause();
      // }
      // this.currentPlayer = player;
    },

    handleClick(tab, event) {
      console.log(this.activeName);

      this.curCate = this.list[this.activeName]?.name;
      this.getissuelist();
    },

    // 滚动监听器
    onScroll() {
      // 获取所有锚点元素
      const navContents = document.querySelectorAll(".content .info");

      // 所有锚点元素的 offsetTop
      const offsetTopArr = [];
      navContents.forEach((item) => {
        offsetTopArr.push(item.offsetTop - 179);
      });
      // 获取当前文档流的 scrollTop
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 定义当前点亮的导航下标
      let navIndex = 0;
      for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是n了
        if (scrollTop >= offsetTopArr[n]) {
          navIndex = n;
        }
      }
      this.active = navIndex;
    },
    // 跳转到指定索引的元素
    scrollTo(index) {
      // 获取目标的 offsetTop

      // css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1

      const targetOffsetTop =
        document.querySelector(`.content .info${index}`).offsetTop - 140;
      // const targetOffsetTop = document.querySelector(`.content info:nth-child(${index + 1})`).offsetTop
      // 获取当前 offsetTop
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，
      const STEP = 1000;
      // 判断是往下滑还是往上滑
      if (scrollTop > targetOffsetTop) {
        // 往上滑
        smoothUp();
      } else {
        // 往下滑
        smoothDown();
      }
      // 定义往下滑函数
      function smoothDown() {
        // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
        if (scrollTop < targetOffsetTop) {
          // 如果和目标相差距离大于等于 STEP 就跳 STEP
          // 否则直接跳到目标点，目标是为了防止跳过了。
          if (targetOffsetTop - scrollTop >= STEP) {
            scrollTop += STEP;
          } else {
            scrollTop = targetOffsetTop;
          }
          document.body.scrollTop = scrollTop;
          document.documentElement.scrollTop = scrollTop;
          // 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
          requestAnimationFrame(smoothDown);
        }
      }
      // 定义往上滑函数
      function smoothUp() {
        if (scrollTop > targetOffsetTop) {
          if (scrollTop - targetOffsetTop >= STEP) {
            scrollTop -= STEP;
          } else {
            scrollTop = targetOffsetTop;
          }
          document.body.scrollTop = scrollTop;
          document.documentElement.scrollTop = scrollTop;
          requestAnimationFrame(smoothUp);
        }
      }
    },
  },
};
</script>
  
  <style scoped lang="scss">
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: rgb(0, 173, 180);
}
::v-deep
  .el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
  color: rgb(0, 173, 180);
}
::v-deep .el-dialog {
  margin-top: 2vh !important;
}
.feedback {
  .item {
    border-bottom: 1px solid #efefef;
    margin-bottom: 15px;
    .top {
      // padding: 20px 0;
      display: flex;
      // align-items: center;
      justify-content: space-between;
      .name {
        .info3 {
          align-items: center;
          display: flex;
          color: #323232;
          font-size: 14px;
          span {
            font-weight: bold;
            font-size: 14px;
          }
        }
        .imgs {
          margin: 15px 0;
        }
      }
      .time {
        font-size: 13px;
        color: #999;
      }
      .photo {
        border: 1px solid #323232;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
  }
}
::v-deep .el-button--primary {
  background: #25a2ab !important;
  border: 1px solid #25a2ab !important;
}

.forms {
  width: 500px;
  margin: 50px 0;
}
.divInnerBox {
  padding: 10px 20px 20px;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.pro {
  .cont {
    padding: 20px 0 12px;
    .list {
      display: flex;
      flex-wrap: wrap;

      li {
        transition: all 0.5s;
        cursor: pointer;
        list-style-type: none;
        margin-bottom: 35px;
        display: flex;
        flex-direction: column;
        width: 23.5%;
        // height: 236px;
        margin-right: 2%;
        // outline: 1px solid rgba(187, 187, 187, 1);
        box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.4);
        &:nth-child(4n) {
          margin-right: 0;
        }
        //
        .bg {
          flex: 1;
          // background: #bbbbbb;
          img {
            display: block;
            width: 100%;
            height: 200px;
            overflow: hidden;
            margin: 0 auto;
          }
        }
        .time {
          color: rgba(16, 16, 16, 1);
          font-size: 20px;
          text-align: center;
          font-family: AlibabaPuHui-bold;
          height: 63px;
          display: flex;
          align-items: center;
          justify-content: center;
          -webkit-line-clamp: 1;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .list li:hover {
      margin-top: -8px;
      .bg img {
        transform: scale(1.1);
      }
    }
  }
}
.first {
  font-size: 17px;
  font-weight: bold;
  padding: 15px 20px;
}
.sec {
  font-size: 14px;
  padding: 12px 20px;
}

/* 内容区的样式 */
.content {
  // background-color: white;
  /* width: 500px; */
  margin-left: 300px;
  margin-right: 20px;

  flex: 1;

  .titles {
    display: flex;
    align-content: center;
    justify-content: space-between;
    padding: 14px 0 20px;
    font-size: 17px;
    font-weight: bold;
    border-bottom: 2px solid #323232;
    > div {
      display: flex;
      align-items: center;
    }
    i {
      font-size: 25px;
      margin-left: 10px;
      cursor: pointer;
      color: #25a2ab;
      margin-top: 2px;
    }
    //   border-radius: 6px 6px 6px 6px;
    //   border: 1px solid rgba(187, 187, 187, 1);
  }
}
.content .info {
  // width: 100%;
}
/* 导航栏的样式 */
.navs {
  padding-bottom: 10px;
  // border: 1px solid  #efefef;
  box-shadow: 0px 2px 6px 0px rgba(182, 180, 180, 0.4);
  border-radius: 8px;
  position: fixed;
  top: 190px;
  // bottom: 20px;
  left: 30px;
  width: 230px;
  background: #fff;
  // background-color: #efefef;
  overflow-y: auto;
  z-index: 9;
}
.navs li {
  cursor: pointer;
  list-style-type: none;
  font-size: 20px;
}
/* 当导航被点亮后改变颜色 */
.navs .active {
  color: rgb(0, 173, 180);
  /* padding: 10px 20px; */
  background-color: #f5f3f3;
}
</style>
  
  